<style lang="scss" scoped>
@import '@/assets/css/variable';
.courseContainer{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	overflow-y: scroll;
	box-sizing: border-box;
	flex:1;
	background-color: $main-bgc-gray;
	background-color: #ffffff;
	position: relative;
	
	.head-box {
      .box-reminder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 25px;
        bottom: 160px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        .img {
          margin-bottom: 8px;
      }
	 }
    .suggest {
		margin: 10px 10px 0 10px;
		width: 100%;
		.suggest-title {
		  margin-bottom: 12px;
		  color: #646566;	
		}
		.suggest-text {
			.input-text {
				padding: 4px 0 0 4px;
				display: block;
				width: 94%;
			  height: 100px;
				background-color: #f5f7fa;
				color: #B8B8B8;
				border: 0;
			}
			input::-webkit-input-placeholder{
				position: fixed;
				left:5px;
				top: 5px;
			}
		}
	}

	.submit {
    position: fixed;
	  left: 10px;
	  right: 10px;
	  bottom: 5px;
	}
	
	}
	
	.footr-box {
      padding: 18px 0 0 12px;
	  color: #707070;
	  .box-handel {
		  margin-bottom: 18px;
		.footr-name {
			margin-right: 18px;
		}
	  }

	  .suggest {
		margin-top: 10px;
		width: 100%;
		padding: 8px 8px 0 0;
		.suggest-title {
		  margin-bottom: 12px;
		  color: #646566;	
		}
		.suggest-text {
      padding-right: 12px;
			.input-text {
        padding: 4px 0 0 4px;
				padding:0;
				display: block;
				width: 100%;
			  height: 100px;
				background-color: #f5f7fa;
				color: #B8B8B8;
				border: 0;
			}
			input::-webkit-input-placeholder{
				position: fixed;
				left:5px;
				top: 5px;
			}
		}
	}

	.kk {
		width: 100%;
		height: 10px;
		background-color: #f5f7fa;
		margin-top: 18px;
	}

	.text {
		margin-top: 10px;
		color: #B8B8B8;
		.text-title {
			margin-right: 10px;
		}
	}

	.retroaction-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
  }
  
  .popup-city {
	  width: 100%;
	  height: 100%;
	  background-color: #488cf4;
  }
	
}

</style>

<template>
	<div class="courseContainer">
    <!-- <bar-nav @getBack="getBack" @backHome="backHome" :title="title"></bar-nav> -->
    <!-- <van-button size="mini" type="info" @click="dataform" style="margin-left: 10px;">有无表单</van-button> -->


    <div class="head-box" v-if="headShow">
      <van-form @submit="onSubmit">
        <van-field :rules="userFormRules.name" v-model="modelList.name" label="姓名" input-align="right" placeholder="请填写您的姓名" ></van-field>
        <van-field :rules="userFormRules.telphone" v-model="modelList.telphone" label="手机" input-align="right" placeholder="请填写您的手机" ></van-field>
        <van-field :rules="userFormRules.fieldValue" @click="clickStreet" v-model="fieldValue" input-align="right" is-link readonly :closeable="false" label="街道" placeholder="请选择您所在的街道"/>
        <van-popup v-model="show" round position="bottom">
          <van-cascader right-icon="arrow-down" :closeable="false" v-model="cascaderValue" title="请选择您所在的街道" label-align="right" :options="options" @close="show = false" @change="onChange" @finish="onFinish"/>
        </van-popup>

        
        <van-field :rules="userFormRules.column" @click="clickPsearch" v-model="column" label="社区" right-icon="arrow-down" input-align="right" placeholder="请选择您所在的社区" ></van-field>

        <!-- 弹出层 -->
        <van-popup v-model="showPicker" :style="{ height: '75%' }"   round position="bottom">
          <van-picker title="标题" right-icon="arrow-down" :columns="columns" show-toolbar  @confirm="onConfirm" @cancel="onCancel" />
        </van-popup> 

        <div class="suggest">
          <div class="suggest-title">
            <span>建议内容</span>
          </div>
          <div class="suggest-text">
            <textarea v-model="contents" class="input-text" type="text" placeholder="请填写您的建议和问题" />
          </div>
        </div>

        <div class="box-reminder" @click="toView('/feedback')">
            <img src="../../assets/img/serch.png" alt="">
         </div>

        <div style="margin: 16px; " class="submit">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
	  


	  <div class="footr-box" v-if="!headShow" v-for="(item, i) in adviceData" :key="i">
        <div class="box-handel">
          <span class="footr-name">姓名：</span>
          <span>{{item.name}}</span>
        </div>
        <div class="box-handel">
          <span class="footr-name">手机号：</span>
            <span>{{item.tel}}</span>
        </div>

        <div class="suggest">
          <div class="suggest-title">
            <span>建议内容</span>
          </div>
		  <div class="suggest-text">
			<textarea class="input-text" type="text" placeholder="请填写您的建议或问题请填写您的建议或问题请填写您的建议或问题" />
		  </div>
        </div>
        
        <!-- <div class="kk"></div> -->
        
        <div v-if="retroactionShow">
            <div class="suggest"  >
              <div class="suggest-title">
                <span>反馈内容</span>
              </div>
			  <div class="suggest-text">
			    <textarea v-model="item.content" class="input-text" type="text" placeholder="请填写您的建议或问题请填写您的建议或问题请填写您的建议或问题" />
		      </div>
            </div>
            <div class="text">
              <span class="text-title">鹿城区住建局</span>
              <span>2021-02-21</span>
            </div>
          </div>
        
        <div v-if="!retroactionShow" class="retroaction-image">
          <img src="../../assets/img/retroaction.png" alt="">
        </div>
    </div>


 
  </div>
</template>

<script>
import { myMixins } from "@/assets/js/mixins.js"
import BarNav from '@/components/BarNav'
import AreaList from '@/components/AreaList'
import {Toast} from 'vant'
// import { mapState } from 'vuex';

export default {
	mixins: [myMixins],
  name: "advit",

  components: {
  BarNav,AreaList
	},


	data() {
    return {
    modelList: {
      name: '',
		  telphone: ''
	  },
    // 姓名和手机号验证规则
    userFormRules: {
      name: [{ required: true }],
      telphone: [{ required: true },{ pattern: /^1(?:70\d|(?:9[89]|8[0-24-9]|7[135-8]|66|5[0-35-9])\d|3(?:4[0-8]|[0-35-9]\d))\d{7}$/, message: '手机号格式错误' }],
      fieldValue: [{ required: true }],
      column: [{ required: true }],
    },
	  // value: '',
    // 表单状态
    headShow: true,
    // 有无反馈
    retroactionShow: false,
    title: '咨询建议',
	  // 控制街道状态
	  showPicker: false,
	  // 街道数据
    show: false,
    fieldValue: '',
    cascaderValue: '',
    options: [],
    // 街道数据
    addStreet: '',
		communityName: '小',
    // 社区数据
    columns: [],
    column: '',
	  communityId: '',
    areaCode: '',
    // 反馈内容
    contents: '',
    // 渲染数据
    adviceData: []
    }
  },
  // computed: {
	// 	...mapState(['setFeedback'])
	// },
	created() {
    if(this.$router.history.current.query.selected) {
      this.headShow = false
    }
    this.headShow = true
    // 渲染查询数据
    if(!this.$store.state.feedbackData[0]) return
    this.getFeedback(this.$store.state.feedbackData[0])
    
  },
	watch: {
		
	},
	mounted() {
	},
	methods: {
    toView(path){
		this.$router.push(path)
  	},

    getFeedback(value) {
      this.$toast('查询成功');
      // console.log(value,'value');
      this.headShow = false
      this.adviceData.push(value)
      if(this.adviceData.content) {
        this.retroactionShow = true
      }
      
    },

    // 街道触发事件
    onChange({ value, text }) {
      // console.log(value, text, 111111);
      
    },
    // 街道取消
    onFinish({ selectedOptions , value }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      this.areaCode = value
    },
    // 确认
    onConfirm(value, index) {
      if(!value) return
      this.column = value.text
      this.communityId = index
      this.showPicker = false
    },
    // 触发
    // onChangePicker(picker, value, index) {
    //   console.log(value);
    //   this.column = value.text
    //   this.communityId = index
    //   this.showPicker = false
    // },
    // 社区取消
    onCancel() {
      this.$toast('取消');
      this.column = ''
      this.showPicker = false
      this.columns = []
    },



	 dataClick() {
		this.retroactionShow = !this.retroactionShow
	 },
    dataform() {
      this.headShow = !this.headShow
    },

	// 点击街道发起请求
	clickStreet() {
    this.show = true
	  this.$request.AreaPtree().then(res => {
		  if(res.code != 200) return
		  this.options = this.eachReplaceKey(res.result)
	  })
	},

  // 递归循环数据展示
  eachReplaceKey(data) {
    // console.log(data);
        let item=[];
        data.map((list)=>{
            let newData={};
            newData.text=list.name;
            newData.value=list.code;
            newData.children=list.children;
            if(list.children){
              newData.children = this.eachReplaceKey(list.children)
            }
            item.push(newData);
        })
        return item;
        }, 

	// 点击小区发起请求
	clickPsearch () {
    this.showPicker = true
    if(this.columns.length>0) {
      this.columns = []
    }
    this.$request.AreaPsearch( {
    params: {
    areaCode: this.areaCode,
    communityName: '小'
    }
		}).then(res => {
      if( res.result.length == 0) return this.$toast('查询社区失败，请重新选择街道！');
      const cityList = []
      res.result.forEach(item => {
        let newData={};
        newData.text= item.community;
        newData.communityId= item.id;
        cityList.push(newData);
      });
      this.columns = cityList
	  })
	},

	// 提交
	onSubmit() {
     this.headShow = false
     this.$request.AdviceinfoAdd({
       name: this.modelList.name,
       tel: this.modelList.telphone,
       areaCode: this.areaCode ,
       communityId: this.columns.communityId,
       content: this.contents
     }).then(res => {
       console.log(res);
       this.$toast('提交成功')
       this.$router.push('/home')
     })
     
   },
	},
}
 
</script>